<template>
  <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#000"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1" @click="go('/home')">HOME</el-menu-item>
  <el-submenu index="2">
    <template slot="title"><span @click="go('/browse')">BROWSE</span></template>
    <el-menu-item index="2-1">中药材</el-menu-item>
    <el-menu-item index="2-2">中药组方</el-menu-item>
    <el-menu-item index="2-3">化合物</el-menu-item>
    <el-menu-item index="2-4">靶点</el-menu-item>
    <!-- <el-submenu index="2-4">
      <template slot="title">靶点</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu> -->
     <el-menu-item index="2-3">来源植物名</el-menu-item>
      <el-menu-item index="2-3">疾病</el-menu-item>

  </el-submenu>
  <el-submenu index="3">
    <template slot="title">DOWNLOAD</template>
    <el-menu-item index="3-1"><a class="white-link" :href="url" :download="fileName" @click="go('/download')">下载结点</a>  </el-menu-item>
    <el-menu-item index="3-2"><a class="white-link" :href="url" :download="fileName">下载关系</a></el-menu-item>
  </el-submenu>
  <el-menu-item index="4" @click="go('/statistics')">STATISTICS</el-menu-item> 
  <el-menu-item index="5">ABOUT</el-menu-item>
  <el-menu-item index="6" @click="go('/search')">Knowledge Graph</el-menu-item>
</el-menu>
</template>

<script>
import {downloadNode} from '../api/api.js'
export default {
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        url:'',
        fileName:''
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      downloadFile(){
        downloadNode().then(response =>{
          // const timestamp = new Date().getTime()
          var u = response.data['url']
          this.url = `http://127.0.0.1:8000${u}` 
          this.fileName = response.data['fileName']
          console.log(this.url,this.fileName)
        }).catch(error =>{
          console.error('下载文件失败：',error)
        })
      },
      go(path){
        this.$router.push(
          {
            path:path,
          }
        )
      }
    }

}
</script>

<style lang="css">
  a.white-link{
    color: white;
    text-decoration: none;
  }
  .el-menu-demo{
    /* margin-left: 10px;
    margin-right: 10px; */
    color: black;
  }
</style> 
